<template>
    <div id="app">

        <Slider :slides="slides" :announcement="announcement"></Slider>

        <div class="section">
            <Booklist @select="xxx" heading="最新更新" :books="lastUpdated"></Booklist>
        </div>
        <div class="section">
            <Booklist @select="xxx" heading="小编推荐" :books="recommoned"></Booklist>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">

    import Booklist from "./components/Booklist.vue"
    import Slider from "./components/Slider.vue"

    import t1 from "./fixtures/sliders/t1.svg"
    import t2 from "./fixtures/sliders/t2.svg"

    import c1 from "./fixtures/covers/1.svg"
    import c2 from "./fixtures/covers/2.svg"
    import c3 from "./fixtures/covers/3.svg"
    import c4 from "./fixtures/covers/4.svg"
    import c5 from "./fixtures/covers/5.svg"
    import c6 from "./fixtures/covers/6.svg"

    export default{
        components: {Booklist, Slider},
        name: 'app',
        data(){
            return {
                lastUpdated: [],
                recommoned: [],
                slides: [],
                announcement:''
            }
        },
        mounted(){
          console.log("mounted");
        },
        beforecreate(){
            console.log("beforeCreate");
        },
        beforemount(){
            console.log("beforeMount");
        },
        created(){
            console.log("created:data received");
            this.$http.get('/src/fixtures/data2.json').then(res => {
                this.announcement = res.body.announcement;
                this.slides = res.body.slides;
                this.recommoned = res.body.recommoned;
                this.lastUpdated = res.body.lastUpdated;
        })
        },
        methods: {
            xxx(book){
                alert("Book name:" + book.title + "\nBook id:" + book.id + "\nBook authors:" + book.authors);
            }
        },
    }
</script>


